<script setup>
import { ref } from 'vue'
import request from '../api/request';

defineProps({
  msg: String,
})

const count = ref(0)
const result = ref('')

function handleClick() {
  request.get('/hello')
  .then(response => {
    console.log(response.data);
    result.value = response.data
  })
  .catch(error => {
    alert(error);
  });
}
const reset = () => {
  result.value = ''
}

</script>

<template>
  <h1>这是Hello2页面</h1>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <br/>
    <br/>
    <button style="margin-right: 5px;" type="button" @click="handleClick">后台通信测试</button>
    <button type="button" @click="reset">重置</button>
    <br/>
    <p>
      展示后台通信测试结果：
      <br/>
      <textarea disabled style="width: 300px; height: 30px;" v-model="result"></textarea>
    </p>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
